/* ============== body =========== */
.item_banner{
    position: relative;
    margin-top: 3rem;
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
}
.item_banner img{
    width: 100%;
    height: auto;
}
.title{
	position: relative;
	height: 2rem;	
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.1rem;
	font-weight: bold;
 	color:var(--precolor-fiv);
}
.titletwo{
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: .8rem;
 	color:var(--precolor-fiv);
	margin-bottom: .5rem;
}
.ins-container{
    position:relative;
    width: 100vw;
    min-height:50vw;
    margin-bottom: .2rem;
    display: flex;
    background-image: url("../../photo/R-C.jpg"); 
    background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;
} 
.ins-contain-hover{
	position: relative;
	left:10vw;
	width: 20rem;
	display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
	padding:.5rem 0;	
	}

.ins-content{
  	height:2rem;
	width: 12rem;
	display: flex;
    margin: .2rem 2rem;
    text-decoration: none;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    font-size: 1rem;
    border-radius: .5rem;    
    background-color: var(--precolor-fou); 
}
.interval{height:.2rem;}
.re-body{
	position: relative;
	top: 1rem;
    display: flex;
    flex-direction: column;  
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
	background-color:var(--precolor-fou);
	width:90vw;
	margin:.5rem auto;
}
.re-card{
    display: flex;
    flex-flow: column;  
    justify-content: flex-start;  
    flex-wrap: wrap;   
    align-items: flex-start;   
    top:var(--url-list-height);
    width: 86vw;
	margin:auto 2rem;
}
.re-card-div{
	display:flex;
	flex-direction: row;
	justify-content:space-between;
	align-items:center;
	margin:.5rem 0;
	background-color:var(--precolor-thr);
	border-radius: .2rem;
	transition: box-shadow 0.3s ease-in-out;
	pointer-events: auto;
}
.re-card-div:hover{
	box-shadow: 0 .2rem .5rem var(--precolor-two);
}

.re-card-img{
	width: 2rem;
	height: 2rem;
    background-size:100% 100%;
    background-repeat:no-repeat;
	border-radius: 20%;
	overflow: hidden;
	margin:.5rem .5rem;
}
.re-card-name{
	font-size: 1rem;
	transition: color .3s ease-out;
	margin:0 .2rem;
	color:var(--precolor-fiv);
}
.ins-intro{
    display: none;
	text-align: left;
}

@media  screen and (max-width:500px){
.ins-container{
    background-size: 100%;
}
.ins-container .title{
    left: 1rem;
    width: 14rem;
    height: 2rem;
	font-size: 1rem
}
.ins-container .titletwo{
    left: 1rem;
    width: 14rem;
	font-size: .9rem;
}
.ins-contain-hover {
    left: 1rem;
    width: 14rem;
    background-color: transparent;
}
.ins-content{
  	height:1rem;
   	width: 12rem;
    margin: .1rem 0;
    font-size: 1rem;
    border-radius: .2rem;
    /* box-shadow: 0 0 0 .1rem rgba(0.9,0.9,0.9,.1),
                inset 0 0 .1rem .1rem rgba(0.8,0.8,0.8,.3);     */
}
.re-card-div{
	margin:.2rem 0;
	border-radius: .2rem;
}
.re-card-div:hover{
	box-shadow: 0 .2rem .2rem var(--precolor-two);
}

.re-card-img{
	width: 1.5rem;
	height: 1.5rem;
	margin:.2rem .2rem;
}
.re-card-name{
	font-size: 1rem;
}
}


/*======后纪部分============*/
.majorprod-container{
    position:relative;
    width: 90vw;
    min-height: 60vw;
    margin: 0 auto;
    display: flex;
    justify-content:center;
    align-items: center;
    overflow:hidden;
    background: var(--precolor-fou) url("../../photo/family_two.jpg") no-repeat left; 
    background-size: contain;
    /* box-shadow:0 0 .2rem .5rem rgba(0.9,0.9,0.9,.1),
                inset 0 0 .2rem .2rem rgba(0.8,0.8,0.8,.3);  */
}    
.majorprod-package{
    position:relative;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: center;
} 

.arrow-down{
    position: relative;
    display: flex;
    margin: .2rem 0;
    padding: 0 1.5rem;
	padding-right:2rem;
    width: 90vw;
    justify-content: center;
    align-items: center;
    line-height: 2rem;
    border-radius: .5rem;    
    color:var(--precolor-fiv);
    font-size: 1rem;
    text-indent: 2rem;
    text-align: left;
    background-color:var(--precolor-one);
}
.arrow-down i {
	position: absolute;
	top: 20%;
	left: 90%;
	transform: translateY(-20%);
	transform-origin: center top;
	animation: shake 1s infinite;
}
@keyframes shake {
	0% { transform: translateY(0); }
	25% { transform: translateY(-.2rem); }
	50% { transform: translateY(0); }
	75% { transform: translateY(.2rem); }
	100% { transform: translateY(0); }
  }
.majorprod-package .arrow-down:hover,.majorprod-package .arrow-down:active{
    background: linear-gradient(to bottom, var(--precolor-one) 0%,var(--precolor-thr) 5%,var(--precolor-thr) 95%,var(--precolor-one) 100%);
}

@media  screen and (max-width:500px){
.majorprod-container{
    background: var(--precolor-fou) url("../../photo/family_two.jpg") no-repeat center; 
    background-size: contain;
}
#arrow1{
	margin-top: 1.5rem;}
#arrow1 i{display: flex;}
#arrow2,#arrow3,#arrow4,#arrow5{display: none;} 	
.arrow-down{
    margin: .2rem 0;
    width: 90vw;
    line-height: 1.2rem;
    border-radius: .05rem;    
    font-size: 1rem;
    text-indent: 2rem;
}
.majorprod-package div{
    margin: .2rem 0;
    width: 90vw;
    line-height: 1.2rem;
    font-size: .8rem;
    text-indent: 2rem;
}
}


.shadow{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 10;
			/* 为mozilla firefox 设置透明度  */
	-moz-opacity: 0.6;
			/* 设置透明度 */
	opacity: .60;
			/* 为IE 设置透明度  */
	filter: alpha(opacity=66);
}
		
.window_ins{
	display: none;
	position: absolute;
	top: 20%;
	left: 25%;
	width: 50%;
	height: 60%;
	border: .2rem solid honeydew;
	background-color: aliceblue;
	z-index: 11;
}